<!--
 * @Author: dfh
 * @Date: 2024-03-20 11:14:20
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <view class="card-item" v-for="(item, index) in data" :key="index" @click="toArticleDetailHandle(item)">
            <image :src="item.cover" class="img" mode="widthFill" />
            <view class="flex flex-col ml-20 flex-1">
                <text class="txt-black-34 txt-28 ">{{ item.title }}</text>
                <text class="txt-black-102 txt-22 mt-20">{{ item.createdTime }}</text>
            </view>
        </view>
    </view>

</template>

<script setup>
defineProps({
    data: {
        type: Array,
        default: () => []
    }
})

const toArticleDetailHandle = (item) => {
    uni.navigateTo({ url: `/pages/article/index?createdTime=${item.createdTime}&title=${item.title}&content=${item.content}` })
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    
    /* border-radius: 20rpx; */

    .card-item {
        display: flex;
        align-items: center;
        width: 100%;
        border-bottom: 2rpx solid #eee;
        background-color: white;
        padding: 20rpx;
        box-sizing: border-box;
        &:first-child{
            border-radius: 20rpx 20rpx 0 0;
        }
        &:last-child {
            border-radius:0 0 20rpx 20rpx;
        }
        .img {
            width: 220rpx;
            height: 200rpx;
            border-radius: 20rpx;
        }
    }
}
</style>